<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="用户账号">
        <el-input v-model="queryParams.mobile" placeholder="请输入用户账号" clearable style="width: 240px" @keyup.enter.native="getList" />
      </el-form-item>
      <el-form-item label="收款方信息">
        <el-input v-model="queryParams.title" placeholder="请输入收款方信息" clearable style="width: 240px" @keyup.enter.native="getList" />
      </el-form-item>
      <el-form-item label="服务中心名称">
        <el-input v-model="queryParams.centerName" placeholder="请输入服务中心名称" clearable style="width: 240px" @keyup.enter.native="getList" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList" >搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >添加服务中心</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="用户账号" align="center" prop="mobile" min-width="120" />
      <el-table-column label="服务中心名称" align="center" prop="nickName" min-width="140">
        <template slot-scope="scope">
          <el-popover placement="right" width="400" trigger="click">
            <el-form>
              <el-form-item label="服务中心名称">
                <el-input :value="scope.row.centerName" readonly placeholder="请输入收款方信息"  />
              </el-form-item>
              <el-form-item label="服务中心电话">
                <el-input :value="scope.row.centerMobile" readonly placeholder="请输入收款方信息"  />
              </el-form-item>
              <el-form-item label="服务中心地址">
                <el-input :value="scope.row.address" readonly placeholder="请输入收款方信息"  />
              </el-form-item>
              <el-form-item label="服务中心简介">
                <el-input :value="scope.row.introduce" readonly placeholder="请输入收款方信息"  />
              </el-form-item>
              <el-form-item label="简介图片">
                <el-image v-for="(img,index) in scope.row.pictures" :key="index" :src="img" style="width: 60px;height: 60px;" :preview-src-list="[img]"></el-image>
              </el-form-item>
            </el-form>
            <p class="blue" slot="reference">{{scope.row.centerName}}</p>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="用户昵称" align="center" prop="nickName" min-width="120" />
      <el-table-column label="拨款总额" align="center" prop="allCount" />
      <el-table-column label="当前剩余额度" align="center" prop="remainingCount" min-width="120" />
      <!-- <el-table-column label="总单量" align="center" prop="orderCount" /> -->
      <el-table-column label="总支出" align="center" prop="appropriationCount" />
      <el-table-column label="收款方信息" align="center" prop="title" />
      <el-table-column label="银行卡号" align="center" prop="number" />
      <el-table-column label="银行卡开户信息" align="center" prop="details" min-width="120" />
      <el-table-column label="收款二维码" align="center" prop="picture">
        <template slot-scope="scope">
          <el-image v-if="scope.row.picture" :src="scope.row.picture" style="width: 60px;height: 60px;" :preview-src-list="[scope.row.picture]"></el-image>
          <p v-else>暂未上传</p>
        </template>
      </el-table-column>
      <el-table-column label="新增时间" align="center" prop="createTime" width="100" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="140" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-check" @click="appropriation(scope.row)">拨款申请</el-button> <br />
          <el-button size="mini" type="text" icon="el-icon-check" @click="appropriationLog(scope.row)">查看明细</el-button> <br />
          <el-button size="mini" type="text" icon="el-icon-edit" @click="editInfo(scope.row)">编辑信息</el-button> <br />
          <el-button size="mini" type="text" icon="el-icon-edit" v-if="!scope.row.centerStatus" @click="noUser(scope.row)">账户禁用</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.centerStatus" @click="noUser(scope.row)">账户启用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 新增服务中心用户 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="服务中心名称" prop="centerName">
          <el-input v-model="form.centerName" placeholder="请输入服务中心名称" />
        </el-form-item>
        <el-form-item label="服务中心电话" prop="centerMobile">
          <el-input type="number" v-model="form.centerMobile" placeholder="请输入服务中心电话" />
        </el-form-item>
        <el-form-item label="服务中心地址" prop="address">
          <el-input v-model="form.address" :maxlength="50" placeholder="请输入服务中心地址" />
        </el-form-item>
        <el-form-item label="服务中心简介" prop="introduce">
          <el-input v-model="form.introduce" type="textarea" rows="4" placeholder="请输入服务中心简介" />
        </el-form-item>
        <el-form-item label="简介图片" ref="mainImageUrl2">
          <image-drap-upload v-model="form.pictures" :limit="5" />
        </el-form-item>
        <el-form-item label="用户手机号" prop="mobile">
          <el-input type="number" v-model="form.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="收款方信息" prop="title">
          <el-input v-model="form.title" placeholder="请输入公司或个人收款信息" />
        </el-form-item>
        <el-form-item label="银行卡号" prop="number">
          <el-input type="number" v-model="form.number" placeholder="请输入银行卡号" />
        </el-form-item>
        <el-form-item label="银行卡开户信息" prop="details">
          <el-input v-model="form.details" placeholder="请输入开户行及支行信息" />
        </el-form-item>
        <el-form-item label="收款二维码" ref="mainImageUrl">
          <image-drap-upload v-model="form.picture" :limit="1" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 拨款 -->
    <el-dialog title="拨款申请" :visible.sync="openMoney" width="700px" append-to-body>
      <el-form ref="payForm" :model="payForm" :rules="rules" label-width="120px">
        <el-form-item label="拨款金额" prop="money">
          <el-input v-model="payForm.money" type="number" min="0" placeholder="请输入拨款金额" />
        </el-form-item>
        <el-form-item label="拨款备注" prop="comment">
          <el-input v-model="payForm.comment" :maxlength="50" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPay">提交申请</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 拨款 -->
    <el-dialog title="收入支出明细" :visible.sync="openLog" width="1200px" append-to-body>
      <el-form :model="queryParamsLog" ref="queryForm" size="small" :inline="true">
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="收入" name="first">
          <div class="minH">
            <div class="flex">
              <p>总收入金额：{{ totalMoney || 0 }}</p>
              <p class="m-l-20">拨款笔数：{{ totalCount || 0 }}</p>
            </div>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="warning"
                  plain
                  icon="el-icon-download"
                  size="mini"
                  @click="handleExport1"
                >收入导出</el-button>
              </el-col>
            </el-row>
            <el-table v-loading="loading" :data="dataListLog">
              <el-table-column label="序号" align="center" type="index" />
              <el-table-column label="拨款人" align="center" prop="createName" min-width="120" />
              <el-table-column label="拨款金额" align="center" prop="money" min-width="120" />
              <el-table-column label="剩余金额" align="center" prop="lastMoney" min-width="140" />
              <el-table-column label="拨款时间" align="center" prop="createTime" min-width="100" />
              <el-table-column label="拨款备注" align="center" prop="comment" min-width="140" show-overflow-tooltip />
            </el-table>
            <pagination
              v-show="totalLog > 0"
              :total="totalLog"
              :page.sync="queryParamsLog.pageNo"
              :limit.sync="queryParamsLog.pageSize"
              @pagination="getReordLog1" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="拨款支出" name="second">
          <div class="minH">
            <div class="flex">
              <p>总支出金额：{{ totalMoney || 0 }}</p>
              <p class="m-l-20">服务站收入金额：{{ totalMoney || 0 }}</p>
              <!-- <p class="m-l-20">总报单量：{{ totalCount || 0 }}</p> -->
            </div>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport2">支出导出</el-button>
              </el-col>
            </el-row>
            <el-table v-loading="loading" :data="dataListLog">
              <el-table-column label="序号" align="center" type="index" />
              <el-table-column label="收款账号" align="center" prop="mobile" min-width="120" />
              <!-- <el-table-column label="报单数量" align="center" prop="buyCount" min-width="120" /> -->
              <el-table-column label="收入金额" align="center" prop="money" min-width="120" />
              <el-table-column label="打款凭证" align="center" prop="certificateUrls" min-width="200">
                <template slot-scope="scope">
                  <el-image v-if="scope.row.certificateUrls.length" v-for="(img,index) in scope.row.certificateUrls" :key="index" :src="img" style="width: 60px;height: 60px;" :preview-src-list="[img]"></el-image>
                  <p v-else>暂未上传</p>
                </template>
              </el-table-column>
              <el-table-column label="支出金额" align="center" prop="money" min-width="120" />
              <el-table-column label="剩余金额" align="center" prop="lastMoney" min-width="140" />
              <el-table-column label="拨款时间" align="center" prop="appropriationTime" min-width="100" />
            </el-table>
            <pagination
              v-show="totalLog > 0"
              :total="totalLog"
              :page.sync="queryParamsLog.pageNo"
              :limit.sync="queryParamsLog.pageSize"
              @pagination="getReordLog2" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { addServiceCenter,serviceCenterList,userProhibit,payMoneyForService,editCenterInfo,getRecordLog,getdDisburseRecordLog } from "@/api/serviceCenter/serviceList.js";
import { Debounce } from '@/utils/tools.js';
import imageDrapUpload from '@/components/Upload';
export default {
  name: "productCate",
  components:{
    imageDrapUpload
  },
  data() {
    return {
      title: "新增服务中心用户",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单表格数据
      dataList: [],
      dataListLog: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openMoney:false,
      openLog:false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        mobile: null,
        title: null,
      },
      totalLog:0,
      queryParamsLog: {
        pageNo: 1,
        pageSize: 10,
        id: null,
        beginTime: null,
        endTime: null,
      },
      // 表单参数
      form: {},
      payForm:{},
      // 表单校验
      rules: {
        centerName: [
          { required: true, message: "请输入服务中心名称", trigger: "blur" },
        ],
        centerMobile: [
          { required: true, message: "请输入服务中心电话", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入服务中心地址", trigger: "blur" },
        ],
        introduce: [
          { required: true, message: "请输入服务中心简介", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入用户手机号", trigger: "blur" },
        ],
        title: [
          { required: true, message: "请输入银行卡名称", trigger: "blur" },
        ],
        number: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
        ],
        details: [
          { required: true, message: "请输入银行卡支行名称", trigger: "blur" },
        ],
        money: [
          { required: true, message: "请输入拨款金额", trigger: "blur" },
        ],
        comment: [
          { required: true, message: "请输入拨款备注", trigger: "blur" },
        ],
      },
      activeName: 'first',
      dateRange:'',
      totalMoney: null,
      totalCount: null,
      rolesBool: false,
    };
  },
  watch:{
    dateRange:{
      handler(val){
        if(val && val.length === 2){
          this.queryParamsLog.beginTime = val[0]
          this.queryParamsLog.endTime = val[1]
        }else{
          this.queryParamsLog.beginTime = null
          this.queryParamsLog.endTime = null
        }
        if(this.activeName === 'first'){
          this.getReordLog1()
        }else{
          this.getReordLog2()
        }
      }
    }
  },
  created() {
    this.getList();
    this.rolesBool = this.$store.state.user.roles.indexOf('admin') !== -1;
  },
  methods: {
    handleClick(tab, event) {
      this.queryParamsLog.pageNo = 1
      if(tab.index == 1){
        //拨款支出
        this.getReordLog2()
      }else{
        //收入
        this.getReordLog1()
      }
    },
    // 明细
    appropriationLog(data){
      this.openLog = true
      this.activeName = 'first'
      this.dateRange = ''
      this.queryParamsLog.beginTime = null
      this.queryParamsLog.endTime = null
      this.totalMoney = null;
      this.totalCount = null;
      this.queryParamsLog.serviceCenterId = data.id
      this.getReordLog1()
    },
    //收入明细
    getReordLog1(){
      this.loading = true;
      getRecordLog(this.queryParamsLog).then(res => {
        this.loading = false;
        if(res.code === 200){
          this.dataListLog = res.data;
          this.totalMoney = res.extend.money;
          this.totalCount = res.extend.count;
          this.totalLog = res.extend.total;
        }
      })
    },
    //拨款支出明细
    getReordLog2(){
      this.loading = true;
      getdDisburseRecordLog(this.queryParamsLog).then(res => {
        this.loading = false;
        if(res.code === 200){
          this.dataListLog = res.data;
          this.totalMoney = res.extend.money;
          this.totalCount = res.extend.count;
          this.totalLog = res.extend.total;
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        pageNo: 1,
        pageSize: 10,
        mobile: null,
        title: null,
      };
      this.getList();
    },
    // 编辑
    editInfo(data){
      if(data.isDefault == 1 && !this.rolesBool){
        this.$modal.msgWarning("暂无权限操作！");
        return
      }
      this.open = true
      this.form = JSON.parse(JSON.stringify(data))
      if(this.form.pictures.length > 0){
        this.form.pictures = this.form.pictures.map(item => {
          return { 'url' : item}
        })
      }
      if(this.form.picture){
        this.form.picture = [{'url': this.form.picture}]
      }
      this.title  = '编辑服务中心用户';
    },
    // 拨款
    appropriation(data){
      this.openMoney = true
      this.clickData = data
      this.reset()
    },
    submitPay:Debounce(function (row) {
      let that = this
      this.payForm.serviceCenterId = this.clickData.id
      that.$refs["payForm"].validate(valid => {
        if (valid) {
          payMoneyForService(this.payForm).then((response) => {
            if(response.code == 200){
              that.$modal.msgSuccess("操作成功!");
              that.openMoney = false;
              that.payForm = {};
              that.getList();
            }
          });
        }
      })
    },500),
    // 启用禁用
    noUser(data){
      if(data.isDefault == 1 && !this.rolesBool){
        this.$modal.msgWarning("暂无权限操作！");
        return
      }
      let that = this
      let txt = data.centerStatus?'启用':'禁用';
      that.$modal.confirm('是否确认'+txt+'用户？').then(function() {
        let centerStatus;
        // true为禁用用户，点击后则需要启用
        if(data.centerStatus){
          centerStatus = false
        }else{
          centerStatus = true
        }
        let parmas = {
          id: data.id,
          centerStatus: centerStatus,
        }
        userProhibit(parmas).then(res => {
          if(res.code === 200){
            that.$modal.msgSuccess("操作成功");
            that.getList();
          }
        })
      })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.form = {};
      this.form.pictures = []
      this.form.picture = []
      this.title = '新增服务中心用户'
      this.reset();
      this.open = true
    },
    //收入导出
    handleExport1(){
      this.download('/serviceCenter/export', {
        ...this.queryParamsLog
      }, `收入明细列表${new Date().getTime()}.xlsx`)
    },
    // 支出导出
    handleExport2(){
      this.download('/web/customerRecharge/export', {
        ...this.queryParamsLog
      }, `支出明细列表${new Date().getTime()}.xlsx`)
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      serviceCenterList(this.queryParams).then((response) => {
        if(response.code == 200){
          this.dataList = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openMoney = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.payForm = {};
      this.resetForm("form");
      this.resetForm("payForm");
    },
    /** 提交按钮 */
    submitForm:Debounce(function (row) {
      let that = this
      that.$refs["form"].validate(valid => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.form))
          if(data.pictures.length > 0){
            data.pictures = data.pictures.map(item => item.url)
          }
          if(data.picture.length > 0){
            data.picture = data.picture[0].url
          }
          if(this.title  === '编辑服务中心用户'){
            editCenterInfo(data).then((response) => {
              if(response.code == 200){
                that.$modal.msgSuccess("编辑成功");
                that.open = false;
                that.form = {};
                that.getList();
              }
            });
          }else{
            addServiceCenter(data).then((response) => {
              if(response.code == 200){
                that.$modal.msgSuccess("新增成功");
                that.open = false;
                that.form = {};
                that.getList();
              }
            });
          }
        }
      })
    },500),
  },
};
</script>
<style>
.m-t-5{
  margin-top: 5px;
}
.closeBtn{
  font-size: 24px;
  position: absolute;
  right: -2px;
  top: -2px;
}
.flex{
  display: flex;
}
.m-l-20{
  margin-left: 20px;
}
.blue{
  color: #409eff;
}
.imgBox{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.el-input.is-disabled .el-input__inner{
  color: #606266;
}
.minH{
  min-height: 400px;
}
</style>
